<template>
  <cl-drawer ref="drawer" :props="{
    size: '95%',
    appendToBody: true,
    withHeader: false,
    wrapperClosable: true
  }" backColor="#fff" :hideFooter="true" @close="close" :saving="saving">
    <div style="height: 100%;">
      <div class="closeWarpBox">
        <div class="closeBox" @click="close">
          <i class="el-icon-close"></i>
        </div>
      </div>

      <color-blocks />
      <el-row style="padding-left: 50px;height: 100%;" :gutter="20">
        <el-col :xs="24" :sm="24" :md="5" :lg="5" :xl="5" class="col-leftRow">
          <div class="leftBox">
            <div class="topBox">
              <el-card :body-style="{ padding: '10px' }">
                <el-calendar v-model="timer" :first-day-of-week="7">
                  <template slot="dateCell" slot-scope="{ date, data }">
                    <p :class="data.isSelected ? 'is-selected' : ''" @click="getTime(data.day)">
                      {{
                        data.day
                          .split("-")
                          .slice(2)
                      .join()
                      }}
                      {{ data.isSelected ? "" : "" }}
                    </p>
                  </template>
                </el-calendar>
              </el-card>
            </div>
            <div class="bottomBox">
              <el-card :body-style="{ padding: '10px' }">
                <filter-wrap ref="filter" v-model="search" :is-add="openType == 'cart'" :loading="loading"
                  @search="getData()" @reset="getData()" @searchClick="searchClick" />
                <shop-list-wrap ref="shopListWrap" :selId.sync="search.dept_id" :list="shopList"
                  @confirm="getData(false)" :isRefresh="isRefresh" />
              </el-card>
            </div>
          </div>
        </el-col>

        <el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="18" class="col-right">
          <div class="rightBox">
            <div style="display: flex;justify-content: space-between;">
              <el-button @click="scrollTo('right')"><i class="el-icon-arrow-left"></i></el-button>
              <el-button @click="scrollTo('left')"><i class="el-icon-arrow-right"></i></el-button>
            </div>
            <div style="font-size: 16px;padding: 5px;color:rgb(217 108 108);">
              <span>备注：{{ currShop.remark }}</span>
            </div>
            <div class="board-container" ref="timeBeds">
              <timeline :list="times" :recent-time="recentTime" :cus_type="cus_type" :flag="flag"
                :bed="condition.bed || currShop.bed" @newOrOldChange="newOrOldChange" />
              <time-beds ref="timeBedsCon" :condition="condition" :beds="currShop.bed_num" :shop="currShop"
                :recent-time="recentTime" :panels="panels" :is-today="isToday" :is-before-day="isBeforeDay"
                :is-after-day="isAfterDay" :is-add="openType == 'cart'" @to-shop="toShop" @cell-click="handleCellClick"
                @cell-dragenter="handleCellDragenter">
                <el-popover v-for="item in list" :key="'item' + item.cart_id" placement="right-start" trigger="click"
                  :disabled="item.darg">
                  <appoint-info :info="item" @edit-appoint="openAppointForm(item, true)" />
                  <div v-if="item.cus_type == 1" slot="reference" class="list-item" :class="{
                    'is-have':
                      item.status == 1 &&
                      search.cus_type == 1 &&
                      item.status != 7,
                    'is-old': search.cus_type == 2 && item.status != 7,
                    'is-have': search.cus_type == 0 && item.status != 7,
                    'is-status': item.status !== 1 && item.status != 7,
                    'is-lost': item.status == 7
                  }" :style="item.style" :draggable="item.status == 1 && isToday"
                    @dragstart="handleDragstart(item, $event)" @dragend="handleDragend(item, $event)">
                    <div class="avatar" v-if="item.row > 3">
                      <cl-avatar :src="cusCover(item)" />
                      <div class="cus_type" :style="{
                        backgroundImage: `url(${item.type_bg})`
                      }">
                        {{ item.cus_type | constFilter("CUS_TYPE") }}
                      </div>
                    </div>
                    <div class="name ellipsis" v-if="item.row > 1">
                      {{ item.cus_name || "客户名称" }}
                    </div>
                    <div class="time" v-if="item.row > 2">
                      {{ item.begin_time }} ~ {{ item.end_time }}
                    </div>
                    <ul class="projects">
                      <li v-for="(v, i) in item.projects" :key="i">
                        {{ v }}
                      </li>
                    </ul>
                    <div class="name ellipsis" v-if="item.row > 1">
                      {{ item.add_user_name || "预约人" }}
                    </div>
                    <div class="name ellipsis" v-if="item.row > 1">
                      {{ item.update_at || "操作时间" }}
                    </div>
                  </div>
                  <div v-else slot="reference" class="list-item" :class="{
                    'is-have': item.status == 1 && search.cus_type == 2,
                    'is-old': search.cus_type == 1,
                    'is-have': search.cus_type == 0,
                    'is-status': item.status !== 1,
                    'is-lost': item.status == 7
                  }" :style="item.style" :draggable="item.status == 1 && isToday"
                    @dragstart="handleDragstart(item, $event)" @dragend="handleDragend(item, $event)">
                    <div class="avatar" v-if="item.row > 3">
                      <cl-avatar :src="cusCover(item)" />
                      <div class="cus_type" :style="{
                        backgroundImage: `url(${item.type_bg})`
                      }">
                        {{ item.cus_type | constFilter("CUS_TYPE") }}
                      </div>
                    </div>
                    <div class="name ellipsis" v-if="item.row > 1">
                      {{ item.cus_name || "客户名称" }}
                    </div>
                    <div class="time" v-if="item.row > 2">
                      {{ item.begin_time }} ~ {{ item.end_time }}
                    </div>
                    <ul class="projects">
                      <li v-for="(v, i) in item.projects" :key="i">
                        {{ v }}
                      </li>
                    </ul>
                    <div class="name ellipsis" v-if="item.row > 1">
                      {{ item.add_user_name || "预约人" }}
                    </div>
                    <div class="name ellipsis" v-if="item.row > 1">
                      {{ item.update_at || "操作时间" }}
                    </div>
                  </div>
                </el-popover>
              </time-beds>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 技师岗位数量 -->
      <!-- </div> -->
      <!-- <cl-appoint-form ref="appointForm" @confirm="getData()" /> -->
      <appoint-form ref="addAppoint" @edit-appoint="openAppointForm" @to-maintain="toMaintain" @confirm="getData()" />
      <maintain-form ref="maintain" @confirm="getData()" />
    </div>
  </cl-drawer>
</template>
<script>
//维护
import MaintainForm from "@/cool/modules/customer/components/maintain-form.vue";
import ColorBlocks from "./color-blocks";
import Timeline from "./timeline";
import TimeBeds from "./time-beds";
import AppointInfo from "./appoint-info";
import AppointForm from "./appoint-form";
import FilterWrap from "./filter-wrap";
import ShopListWrap from "./shop-list";
import dayjs from "dayjs";
import { last, isEmpty } from "cl-admin/utils";
import { ossHost } from "@/config/env";
import { mapState, mapGetters } from "vuex";

export default {
  inject: ["$layout"],
  components: {
    MaintainForm,
    ColorBlocks,
    Timeline,
    TimeBeds,
    AppointInfo,
    AppointForm,
    FilterWrap,
    ShopListWrap
  },
  data() {
    return {
      ossHost: ossHost,
      saving: false,
      loading: false,
      title: "预约看板",
      openType: "cart",
      callbackFn: null,
      timer: new Date(), //日历时间 (时间标准时间)
      cus_type: 0,
      flag: "",
      search: {
        biz_id: "",
        city_id: "",
        dept_id: "", //所属
        appoint_date: dayjs(this.timer).format("YYYY-MM-DD"),
        cus_type: 0
      },
      times: [],
      panels: [],
      condition: { teacher: 0, bed_num: 0 },
      list: [],
      shopList: [],
      dragenterCell: null,
      recentTime: {
        fulltime: "",
        time: "",
        top: 0
      },
      shopKeyWords: "",
      shopListTemp: [],
      isRefresh: 1
    };
  },
  computed: {
    shopActivity() {
      const { activity_list } = this.currShop;
      return activity_list?.[0];
    },
    isToday() {
      const { appoint_date } = this.search;
      if (!appoint_date) return false;
      return dayjs(appoint_date).isSame(dayjs(), "d");
    },
    isBeforeDay() {
      return false; //不限制预约时间
      const { appoint_date } = this.search;
      if (!appoint_date) return false;
      return dayjs(appoint_date).isBefore(dayjs(), "d");
    },
    isAfterDay() {
      const { appoint_date } = this.search;
      if (!appoint_date) return false;
      return dayjs(appoint_date).isAfter(dayjs(), "d");
    },
    // 营业开始时间
    btime() {
      const { btime } = this.currShop;
      const { appoint_date } = this.search;
      let time = dayjs(appoint_date + " " + (btime || "00:00"));
      if (time.minute() != 0) {
        time = time.minute() > 30 ? time.add(1, "h").set("m", 0) : time.set("m", 30);
      }
      return time.format("YYYY-MM-DD HH:mm");
    },
    // 营业结束时间
    etime() {
      const { etime } = this.currShop;
      const { appoint_date } = this.search;
      let time = dayjs(appoint_date + " " + (etime || "23:30"));
      if (time.minute() != 0) {
        time = time.minute() > 30 ? time.add(1, "h").set("m", 0) : time.set("m", 30);
      }
      return time.format("YYYY-MM-DD HH:mm");
    },
    // shopList() {
    // 	// const { biz_id } = this.search;
    // 	// return this.getBizRefData(biz_id, "shop_childs");
    // 	this.
    // },
    currShop() {
      const { dept_id } = this.search;
      if (!dept_id) return {};
      let res = this.shopList.find(v => v.dept_id == dept_id);
      console.info("res11112", res);
      return res || {};
    },
    teacherPostList() {
      return this.currShop ? this.currShop.teacher_post_ietm : [];
    },
    ...mapGetters(["browser"])
  },
  created() {
    this.search.biz_id = this.getCurrBiz();
  },
  watch: {
    timer(v) {
      this.search.appoint_date = dayjs(v).format("YYYY-MM-DD");
    }
  },
  methods: {
    /** *
     * 打开预约面板方法
     * @title title 标题
     * @type 打开的类型 cart, selectTime
     * @callbackFn 回调函数
     */
    async open(data = {}, title = "预约看板", type = "cart", callbackFn = null) {
      await this.close();
      if (data.cus_type) {
        this.cus_type = data.cus_type;
        this.flag = true;
      } else {
        this.flag = false;
      }
      this.isRefresh = 1;
      if (type == "selectTime") {
        this.isRefresh = 0;
      }

      this.shopList = [];

      this.$refs.drawer.create(() => {
        this.search.biz_id = data.biz_id || this.getCurrBiz();
        this.title = title;
        this.openType = type;
        this.callbackFn = callbackFn;

        this.$nextTick(async () => {
          await this.$refs.filter.init();
          // this.search.city_id = "";
          // this.search.dept_id = "";
          this.search.cus_type = 0;
          if (data.dept_id) {
            this.search.dept_id = data.dept_id;
          }
          if (data.city_id) {
            this.search.city_id = data.city_id;
          }

          // console.info("this.search.city_id", this.search.city_id)
          // if (!this.search.city_id) {
          // 	this.$message.warning('请先选择预约城市！')
          // 	return false
          // }
          // this.loading = true;

          // setTimeout(() => {
          // 	// this.$refs.filter.search();
          //   console.log(this.search)
          // }, 1000);
        });
      });
    },
    //新老客下拉框选择
    newOrOldChange(cus_type) {
      this.search.cus_type = cus_type;
      this.cus_type = cus_type;
      this.getData();
    },
    getTime(time) {
      console.log(time);
      this.search.appoint_date = time;
      this.getData();
    },
    close() {
      this.search.city_id = "";
      this.search.dept_id = "";
      this.shopKeyWords = "";
      this.cus_type = 0;
      this.flag = "";
      this.timer = new Date();
      this.$refs?.filter?.reset(false);
      this.$refs.drawer.close();
    },
    beforeClose(done) {
      !this.saving && done();
    },
    setTeacher() {
      const { dept_id, appoint_date } = this.search;
      const { teacher } = this.condition;
      this.$refs.setTeacher.open({
        shop_id: dept_id,
        date: appoint_date,
        business_num: teacher
      });
    },
    setNewTeacher() {
      const { dept_id, biz_id } = this.search;
      this.$refs.setNewTeacher.open({
        dept_id,
        biz_id
      });
    },
    // 获取预约数据
    async getData(isReset = true, scrollTo = true) {
      console.log("search", this.search);
      this.loading = true;

      const res = await this.$service.cart.cartBoard(this.search).finally(() => {
        this.loading = false;
      });
      console.log(res);
      this.condition = res?.condition ?? this.condition;

      isReset && (this.shopList = res.shop);
      isReset && (this.shopListTemp = res.shop);
      console.log(this.shopList);
      // if(this.search.dept_id === ''){
      //  this.search.dept_id = this.shopList[0].dept_id
      //  this.getData(false)
      // }
      // else{

      // }
      this.$forceUpdate();
      this.calcTimeBed();
      this.changeShop();

      // console.log("res", res);
      this.$nextTick(() => {
        this.calcDataOffset(res.list || []);
        if (scrollTo) {
          const { top } = this.recentTime;
          this.$refs.timeBeds?.scrollTo?.({ top: top - 3 });
        }
      });
    },
    // 处理最近时间
    initRecentTime() {
      this.recentTime = {
        fulltime: "",
        time: "",
        top: 0
      };
      let btime = dayjs(this.btime);
      let etime = dayjs(this.etime);

      if (this.isToday && btime.isSame(dayjs(), "d")) {
        let now = dayjs();
        now = now.minute() > 30 ? now.add(1, "h").set("m", 0) : now.set("m", 30);
        let minute = now.diff(btime, "m");
        let row = minute / 30;
        // 现在时刻在营业开始时间之前
        if (now.isBefore(btime)) {
          row = 0;
        }
        // 现在时刻在营业结束时间之后
        if (now.isAfter(etime)) {
          row = this.times.length;
        }
        this.recentTime = {
          fulltime: now.format("YYYY-MM-DD HH:mm"),
          time: now.format("HH:mm"),
          top: row * 50
        };
      }
      setTimeout(() => {
        this.panels.forEach(v1 => {
          v1.forEach(v2 => this.cellDisable(v2));
        });
      });
    },
    // 计算预约初始定位
    calcDataOffset(data = []) {
      let btime = dayjs(this.btime);
      let list = data.map(v => {
        let str = v.cart_duration / 60;
        // v.begin_time.format('HH:mm')
        let time = dayjs(btime.format("YYYY-MM-DD") + v.begin_time).add(`${str}`, "hour");
        v.end_time = dayjs(time).format("HH:mm");
        console.log(v.end_time);
        let start = dayjs(btime.format("YYYY-MM-DD") + v.begin_time);
        let end = dayjs(btime.format("YYYY-MM-DD") + v.end_time);
        // 开始cell/结束cell
        let coord = {
          x1: v.bed - 1,
          y1: start.diff(btime, "m") / 30,
          x2: v.bed - 1,
          y2: end.diff(btime, "m") / 30
        };
        let row = coord.y2 - coord.y1;

        // 每格坐标
        let location = [];
        for (let i = 0; i < row; i++) {
          location.push({
            x: coord.x1,
            y: coord.y1 + i
          });
        }
        // 重置cell占用状态
        // console.log("开始cell/结束cell", coord);
        this.resetPanelUse(coord.x1, coord.y1, coord.y2, true);
        // console.log("item", v);
        let res = {
          row,
          coord,
          location,
          type_bg: require(`@/assets/img/${this.$constFilter(
            v.cus_type,
            "CUS_TYPE",
            "type"
          )}.png`),
          style: {
            top: coord.y1 * 50 + "px",
            left: coord.x2 * 110 + "px",
            height: row * 50 + "px"
          },
          drag: false,
          saving: false,
          ...v,
          appoint_date: v.appoint_date,
          appoint_btime: v.btime,
          appoint_etime: v.etime,
          projects: !v.projects ? [] : v.projects.split(",")
        };
        return {
          ...res,
          backup: { ...res }
        };
      });
      console.log("22222222222222", list);
      this.list = list;
    },
    // 计算床位与时间关系坐标
    calcTimeBed() {
      this.panels = [];
      let times = [];
      const { appoint_date } = this.search;
      const { teacher } = this.condition;
      let start = dayjs(this.btime);
      let end = dayjs(this.etime);

      let minute = end.diff(start, "m");
      let rows = minute / 30;
      for (let i = 0; i < rows; i++) {
        times.push({
          date: appoint_date,
          start: start.add(30 * i, "m").format("HH:mm"),
          end: start.add(30 * (i + 1), "m").format("HH:mm"),
          bed_all: this.currShop.bed_num,
          isUse: 0,
          canUse: 0
        });
      }
      let panels = Array(this.currShop.bed_num || 0)
        .fill([])
        .map((v1, x) => {
          return times.map((v2, y) => ({
            ...v2,
            bed: x + 1,
            x,
            y,
            hover: false,
            use: false,
            disable: x + 1 > teacher,
            recent_before: false
          }));
        });

      this.times = times;
      this.panels = panels;
      console.log(this.panels, this.times, "111111111111111");
      this.initRecentTime();
      // this.$refs.timeBeds?.scrollTo?.({ top: 0 });
    },
    // 门店切换
    changeShop() {
      console.log(this.search.appoint_date);
      console.log(this.timer);
      if (isEmpty(this.currShop)) return false;
      if (this.currShop.bed_num > 0) return false;
      this.confirm(`门店“${this.currShop.dept_name}”还未配置床位，是否前往配置？`)
        .then(() => {
          this.toShop();
        })
        .catch(() => { });
      return true;
    },
    toShop() {
      this.close();
      this.$router.push({ name: "CrmPersonnelStore" });
    },
    // 拖拽元素到cell
    handleCellDragenter(cell) {
      console.log("cell", `x=${cell.x},y=${cell.y}`, cell);
      // 如果单元格已使用或禁用状态
      if (cell.use || cell.recent_before) return;
      // 判断当前床位的相同时间内是否有人预约

      this.dragenterCell = cell;
    },
    cellDisable(cell) {
      cell.recent_before = false;
      const { fulltime } = this.recentTime;
      if (!fulltime) return;
      let recentTime = dayjs(fulltime);
      let cellTime = dayjs(cell.date + cell.start);
      cell.recent_before = cellTime.isBefore(recentTime);
      cell.recent_before = false; //不限制时间

      if (!cell.recent_before && !cell.disable && !cell.use) {
        this.times[cell.y].canUse = this.times[cell.y].canUse + 1;
      }
      if (cell.use) {
        this.times[cell.y].isUse = this.times[cell.y].isUse + 1;
      }
    },
    // 拖拽开始
    handleDragstart(item) {
      item.drag = true;
    },
    // 拖拽结束
    handleDragend(item) {
      let cell = this.dragenterCell;
      console.log(cell, "3333333333");
      const { coord } = item;
      item.drag = false;
      this.dragenterCell = null;
      const { teacher } = this.condition;
      if (cell) {
        if (cell.bed > teacher) return;
        // 如果cell单元格已被使用
        if (cell.use) {
          console.log("如果cell单元格已被使用", cell.use);
          this.$message.warning("不可修改预约到该时间点");
          return;
        }
        // 所需占用格子
        let placeCell = [];
        for (let i = 0; i < item.row; i++) {
          let panel = this.panels[cell.x][cell.y + i];
          if (!panel) break;
          placeCell.push(panel);
        }
        // 所需格子数不足
        if (placeCell.length != item.row) {
          console.log("所需格子数不足", placeCell.length != item.rows);
          this.$message.warning("不可修改预约到该时间点");
          return;
        }
        let lastCell = last(placeCell);
        // 检测除自己意外的单元格是否被占用
        let isUse = placeCell
          .filter(v1 => !item.location.some(v2 => v2.x == v1.x && v2.y == v1.y))
          .some(v => v.use);
        // isUse 如果床位相同且placeCell某一格已被使用 且拖拽元素坐标与其不相同
        if (isUse) {
          this.$message.warning("不可修改预约到该时间点", isUse);
          return;
        }

        this.confirm(`是否保存当前床位和时间？`)
          .then(() => {
            //重置单元格使用状态
            this.resetPanelUse(coord.x1, coord.y1, coord.y2);
            // 床位
            item.bed = cell.bed;
            // 定位
            item.style.top = cell.y * 50 + "px";
            item.style.left = cell.x * 110 + "px";
            item.appoint_time = cell.date + " " + cell.start;
            item.appoint_date = cell.date + " " + cell.start;
            // 预约时间
            item.begin_time = cell.start;
            item.end_time = lastCell.end;
            item.appoint_btime = cell.start;
            item.appoint_etime = lastCell.end;
            // 坐标
            item.coord = {
              x1: cell.x,
              y1: cell.y,
              x2: lastCell.x,
              y2: lastCell.y
            };
            item.location = placeCell.map(v => ({
              x: v.x,
              y: v.y
            }));
            delete item.backup;
            item.backup = { ...item };
            // 标记修改后的坐标已使用
            this.resetPanelUse(item.coord.x1, item.coord.y1, item.coord.y2, true);
            this.updateAppoint(item);
            this.initRecentTime();
          })
          .catch(() => { });
      }
    },
    // 更新预约
    async updateAppoint(item) {
      let items = (item?.service_info || []).map(v => ({
        type: v.type || 1,
        id: v.id,
        prod_id: v.id,
        name: v.name,
        lasttime: v.lasttime,
        picture_url: v.picture_url,
        product_category: v.product_category,
        unit_price: v.price,
        price: v.price,
        maintain_type: v.maintain_type || 0,
        is_presents: v.is_presents,
        is_experience: v.is_experience
      }));
      let form = {
        bed: item.bed,
        cart_id: item.cart_id,
        biz_id: item.biz_id, //事业部id
        dept_id: item.dept_id, //门店id
        bra_id: item.bra_id,
        add_dept_id: item.add_dept_id, //预约部门
        add_user_id: item.add_user_id, //预约人
        // dept_ids: [],
        cus_id: item.cus_id, //客户名
        cus_mobile: item.cus_mobile, //客户手机
        appoint_time: item.appoint_time,
        appoint_date: dayjs(item.appoint_date).format("YYYY-MM-DD"), //预约日期
        appoint_btime: item.begin_time, //预约开始时间
        appoint_etime: item.end_time, //预约结束时间
        // items: JSON.stringify(items), //已选服务列表
        remarks: item.remarks || "", //备注信息
        update_type: 2,
        cart_duration: item.cart_duration,
        appoint_arrive: item.appoint_arrive ?? 1
      };
      item.saving = true;
      await this.$service.cart
        .update(form)
        // .catch(e => {
        // 	this.confirm("是否前往改约?").then(() => {
        // 		this.openAppointForm(item);
        // 	});
        // 	throw e;
        // })
        .done(() => {
          this.saving = false;
          this.initRecentTime();
        });
      this.getData(true, false);
      this.$emit("refresh");
      this.$message.success("操作成功");
      // console.log(form);
    },
    // 重置use状态
    resetPanelUse(x1 = 0, y1 = 0, y2 = 0, use = false) {
      if (!this.panels.length) return;
      let row = y2 - y1;
      if (row <= 0) return;
      for (let i = 0; i < row; i++) {
        let cells = this.panels[x1] || [];
        let cell = cells[y1 + i];
        if (!cell) break;
        cell.use = use;
      }
    },
    // 客户头像
    cusCover(item) {
      if (item.cus_img) return item.cus_img;
      return require(`@/assets/img/${item.cus_sex == 2 ? "women" : "men"}.png`);
    },
    // 单元格点击
    handleCellClick(cell) {
      if (this.isBeforeDay || cell.recent_before) return;
      let nextCell = this.panels[cell.x][cell.y + 1];
      const { biz_id, dept_id, city_id } = this.search;
      // for (let i = 0; i < 4; i++) {
      // 	let item = this.panels[cell.x][cell.y + i];
      // 	if (!item || item.use) {
      // 		this.$message.warning("当前时间不可添加预约");
      // 		return;
      // 	}
      // }
      if (this.openType == "selectTime") {
        // 单纯选择预约时间
        if (!this.callbackFn) return false;
        this.callbackFn({
          biz_id,
          dept_id,
          city_id,
          bed: cell.bed,
          appoint_btime: cell.start,
          appoint_date: cell.date, //预约日期
          appoint_time: `${cell.date} ${cell.start}`
        });
        this.close();
        return false;
      }

      if (cell.use) {
        this.$message.warning("当前时间不可添加预约");
        return;
      }

      // let cart_duration = !nextCell || nextCell.use ? 30 : 120;
      // let appoint_time = dayjs(`${cell.date} ${cell.start}`);
      this.$refs.addAppoint.open({
        biz_id,
        dept_id,
        bed: cell.bed,
        appoint_btime: cell.start,
        appoint_date: cell.date, //预约日期
        appoint_time: `${cell.date} ${cell.start}`
        // appoint_etime: appoint_time.add(cart_duration, "m").format("HH:mm"),
        // cart_duration
      });
    },
    // 预约表单
    openAppointForm(data = {}) {
      // this.$refs.appointForm.open(data, true);
      this.$layout.openEditAppointForm(data);
      this.close();
    },
    // 维护
    toMaintain(cus, form) {
      const { biz_id, dept_id } = form;
      console.log(form);
      let data = {
        cus_id: cus.cus_id,
        biz_id,
        dept_id,
        appoint_time: form.appoint_time,
        appoint_date: form.appoint_date, //预约日期
        appoint_btime: form.appoint_btime //预约开始时间
      };
      this.$refs.maintain.open(data);
    },
    searchClick(value) {
      if (!value) {
        this.shopList = [...this.shopListTemp];
        return;
      }
      this.isRefresh = 0;
      let _list = this.shopListTemp;
      this.shopList = _list.filter(e => {
        return e.dept_name.indexOf(value) != -1;
      });
      if (this.shopList.length == 0) {
        this.$message.warning("暂无门店");
      }
    },

    scrollTo(type) {

      const container = this.$refs.timeBeds;
      if (type == "left") {
        container.scrollTo({ left: container.scrollLeft + 150, behavior: 'smooth' });
      } else {
        container.scrollTo({ left: container.scrollLeft - 150, behavior: 'smooth' });
      }


    },
  }
};
</script>
<style lang="scss" scoped>
//用什么插件必须引入相应的样式表，否则不能正常显示
// ::v-deep .appoint-board__dialog {
.el-dialog__header {
  padding: 10px 15px !important;
  // .board-title {
  // 	.cl-filter {
  // 		margin: 0;
  // 		&__label {
  // 			font-size: 14px;
  // 			color: #7a7a7a;
  // 			margin-right: 0;
  // 		}
  // 	}
  // }
}

.el-drawer__container,
.el-drawer__open {
  position: relative;

  .closeWarpBox {
    position: absolute;
    left: 0;
    top: 0;
    width: 49px;
    height: 100%;
    background-color: #303133;

    .closeBox {
      width: 100%;
      height: 50px;
      background-color: #fff;
      position: absolute;
      left: 0px;
      top: 20px;
      z-index: 88;
      text-align: center;
      border: 1px solid #eee;
      border-right: none;
      border-radius: 15px 0 0 15px;
      cursor: pointer;

      i {
        font-size: 25px;
        line-height: 50px;
      }
    }
  }
}

.el-dialog__body {
  height: 78vh;
  overflow: hidden;
  box-sizing: border-box;

  .cl-dialog__container {
    height: 100%;
    overflow: hidden;
  }
}

::v-deep .drawer-wrap_content {
  box-sizing: border-box;
  background-color: #f2f3f5 !important;
  padding: 10px !important;
  // padding: 10px !important;
  height: 100% !important;
}

::v-deep .el-col-offset-1 {
  margin-left: 3.166667%;
}

// &.is-fullscreen {
// 	.el-dialog__body {
// 		height: 85vh;
// 	}
// // }
// .container {
// 	height: 100%;
// 	display: flex;
// 	padding-left: 55px;
// 	// position: relative;
.leftBox {
  width: 100%;
  display: flex;
  flex-direction: column;

  .is-selected {
    background: #f3e9ff !important;
  }

  .topBox {
    height: 300px;
    margin-bottom: 10px;

    .el-card,
    .is-always-shadow {
      width: 100%;
      height: 300px;
    }

    .el-calendar {
      padding: 0 !important;
      width: 100%;
      height: 300px;
      font-size: 12px;

      ::v-deep .el-button--mini {
        padding: 5px 10px !important;
      }

      ::v-deep .el-calendar__header {
        padding: 0 !important;
        padding-bottom: 6px !important;
      }

      ::v-deep .el-calendar__body {
        padding: 0 !important;
        width: 100%;
        height: 300px !important;

        .el-calendar-table {
          .el-calendar-table__row {
            td {
              border: 0px !important;
              width: 14%;

              height: 32px;
              cursor: pointer;

              .el-calendar-day {
                width: 100%;
                height: 30px;
                padding: 0 !important;
                line-height: 30px;
                text-align: center;
              }
            }
          }
        }
      }
    }
  }

  .bottomBox {
    width: 100%;
    flex: 1;

    .el-card,
    .is-always-shadow {}
  }
}

@media screen and (max-width: 768px) {
  .rightBox {
    margin-top: 15px;
  }

  .col-right {}
}

@media screen and (min-width: 769px) {
  .col-right {
    height: 100%;
    max-height: 880px;
  }

  .col-leftRow {
    height: 100%;
  }
}

.rightBox {
  box-sizing: border-box;
  border-radius: 10px;
  width: 100%;
  padding: 10px;
  background: #fff;
  height: 100%;
  flex-direction: column;
  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }
}

-webkit-scrollbar {
  display: none;
}

// }
.board {
  &-title {
    font-size: 14px;
    position: relative;
    z-index: 1000;

    .cl-filter {
      margin: 0;

      &__label {
        font-size: 14px;
        color: #7a7a7a;
        margin-right: 0;
      }
    }

    .set-teacher-btn {
      width: auto;
      background-color: #748afc;
      border-color: #748afc;
      margin-left: 10px;
    }
  }

  &-container {
    flex: 1;
    overflow: auto;
    position: relative;
    padding-bottom: 70px;

    .list-item {
      position: absolute;
      z-index: 5;
      width: 110px;
      height: 110px;
      background: $color-primary;
      box-shadow: 1px 0 0 0 #fff, 0 1px 0 0 #fff, 1px 1px 0 0 #fff, inset 1px 0 0 0 #fff,
        inset 0 1px 0 0 #fff;
      font-size: 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #fff;
      padding: 10px;
      box-sizing: border-box;
      cursor: pointer;
      overflow: hidden;

      &.is-have {
        cursor: move;
        background: $color-primary;
      }

      &.is-old {
        cursor: move;
        background: #bcbfc5;
      }

      &.is-lost {
        cursor: move;
        background: #d56e77;
      }

      &.is-status {
        cursor: move;
        background: $color-success;
      }

      .name,
      .time {
        margin-bottom: 4px;
      }

      .avatar {
        position: relative;
        margin-bottom: 12px;

        .el-image__inner {
          pointer-events: none;
        }

        .cus_type {
          position: absolute;
          bottom: -8px;
          left: 50%;
          transform: translateX(-50%);
          font-size: 12px;
          box-sizing: border-box;
          width: 40px;
          height: 20px;
          line-height: 18px;
          background-size: 100%;
          background-repeat: no-repeat;
        }
      }

      .name {
        width: 100%;
      }

      .projects {
        flex: 1;
        overflow: hidden;
      }
    }
  }
}

.teacher-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  padding: 10px 14px;
  background-color: #f9f9f9;
  margin-bottom: 10px;

  &_left,
  &_right {
    display: flex;
    align-items: center;
  }

  .teacher-list {
    display: flex;
    align-items: center;
    margin-right: 30px;

    &_img {
      width: 36px;
      height: 36px;
      margin-right: 10px;

      img {
        display: block;
        width: 100%;
      }
    }

    &_label {
      color: #666;
      margin-right: 6px;
    }

    &_linght {
      color: #fa3534;
    }
  }
}

// }
</style>
